<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算setter</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_computed">
        <p>The Person Information</p>
        <p>The FirstName : {{firstName}}</p>
        <p>The LastName : {{lastName}}</p>
        <p>The FullName : {{fullName}}</p>
    </div>
    <script>
        var app_computed = new Vue({
            el:'#app_computed',
            data:{
                firstName:'Tu',
                lastName:'Weiya'
            },
            //计算属性默认只有getter方法，如果想使用setter方法，要声明出来；
            //计算属性和普通方法的区别，
                // 计算属性有缓存；普通方法每次调用重新渲染
            computed:{
                fullName:{
                    //get
                    get:function () {
                        return this.firstName +" "+ this.lastName ;
                    },
                    //set,newValue为改变fullName的值
                    set:function (newValue) {
                        var names = newValue.split(" ");
                        this.firstName = names[0] ;
                        this.lastName = names[1] ;
                    }
                }
            }
        })
    </script>
</body>
</html>